<include file="public@header"/>
<style>
.breadcrumb {
  padding: 8px 15px;
  margin-bottom: 20px;
  list-style: none;
  background-color: #f5f5f5;
  border-radius: 4px;
  font-size: 20px;
}
.breadcrumb > li + li:before {
    color: #CCCCCC;
    content: "-> ";
    padding: 0 5px;
	font-size: 30px;
}
</style>

<link href="__STATIC__/js/bootstrap-datetimepicker/css/bootstrap-datetimepicker.css" rel="stylesheet">
</head>
<body>
<div class="wrap js-check-wrap">
    <ol class="breadcrumb">
		<li><a href="{:url('Classroom/campus')}">{$campus['name']}</a></li>
		<li><a href="javascript:history.back(-1)">{$class['name']}</a></li>
		<li class="active">班级排课</li>
	</ol>
	<div  class="row">
		<div class="table-actions" style="margin-left:20px;">
			<input class="btn btn-primary" type="button" value="返回" onclick="javascript:history.back(-1)"></input>
			<input id="timetable_do" class="btn btn-primary" type="button" value="开始排课" onclick="timetable_do();"></input>
			<!-- <button id="delete_classroom" class="btn btn-danger js-ajax-submit" type="submit" style="float:right" -->
					<!-- data-action="{:url('classroom/delete_classroom')}" data-msg="您确定删除吗？">删除 -->
			<!-- </button> -->
		</div>
		<div class="col-md-3">
			<table class="table table-bordered">
				<tr><th><b>开课日期：<input name="start_date" class="js-date" style="text-align:center;" placeholder="请选择开课日期"></input></b></th></tr>
			</table>
			<table class="table table-bordered">
				<tr><th style="text-align:center"><b>每周上课时间：</b></th></tr>
				<tr>
					<th style="text-align:center">
					<div name="1"><b><input name="week" value="1" type="checkbox"/>星期一</b></div>
					<div name="1_input" style="float:right;width:150px;" hidden="hidden">
					<input class="js-hour-minutes" style="width:45%;text-align:center" type="text" value="" id="1_default_starttime"/>—<input class="js-hour-minutes" style="width:45%;text-align:center" type="text" value="" id="1_default_endtime"/>
					</div>
					</th>
				</tr>
				<tr>
					<th style="text-align:center">
					<div name="2"><b><input name="week" value="2" type="checkbox"/>星期二</b></div>
					<div name="2_input" style="float:right;width:150px;" hidden="hidden">
					<input class="js-hour-minutes" style="width:45%;text-align:center" type="text" value="" id="2_default_starttime"/>—<input class="js-hour-minutes" style="width:45%;text-align:center" type="text" value="" id="2_default_endtime"/>
					</div>
					</th>
				</tr>
				<tr>
					<th style="text-align:center">
					<div name="3"><b><input name="week" value="3" type="checkbox"/>星期三</b></div>
					<div name="3_input" style="float:right;width:150px;" hidden="hidden">
					<input class="js-hour-minutes" style="width:45%;text-align:center" type="text" value="" id="3_default_starttime"/>—<input class="js-hour-minutes" style="width:45%;text-align:center" type="text" value="" id="3_default_endtime"/>
					</div>
					</th>
				</tr>
				<tr>
					<th style="text-align:center">
					<div name="4"><b><input name="week" value="4" type="checkbox"/>星期四</b></div>
					<div name="4_input" style="float:right;width:150px;" hidden="hidden">
					<input class="js-hour-minutes" style="width:45%;text-align:center" type="text" value="" id="4_default_starttime"/>—<input class="js-hour-minutes" style="width:45%;text-align:center" type="text" value="" id="4_default_endtime"/>
					</div>
					</th>
				</tr>
				<tr>
					<th style="text-align:center">
					<div name="5"><b><input name="week" value="5" type="checkbox"/>星期五</b></div>
					<div name="5_input" style="float:right;width:150px;" hidden="hidden">
					<input class="js-hour-minutes" style="width:45%;text-align:center" type="text" value="" id="5_default_starttime"/>—<input class="js-hour-minutes" style="width:45%;text-align:center" type="text" value="" id="5_default_endtime"/>
					</div>
					</th>
				</tr>
				<tr>
					<th style="text-align:center">
					<div name="6"><b><input name="week" value="6" type="checkbox"/>星期六</b></div>
					<div name="6_input" style="float:right;width:150px;" hidden="hidden">
					<input class="js-hour-minutes" style="width:45%;text-align:center" type="text" value="" id="6_default_starttime"/>—<input class="js-hour-minutes" style="width:45%;text-align:center" type="text" value="" id="6_default_endtime"/>
					</div>
					</th>
				</tr>
				<tr>
					<th style="text-align:center">
					<div name="7"><b><input name="week" value="7" type="checkbox"/>星期日</b></div>
					<div name="7_input" style="float:right;width:150px;" hidden="hidden">
					<input class="js-hour-minutes" style="width:45%;text-align:center" type="text" value="" id="7_default_starttime"/>—<input class="js-hour-minutes" style="width:45%;text-align:center" type="text" value="" id="7_default_endtime"/>
					</div>
					</th>
				</tr>
			</table>
		</div>
		<div class="col-md-6">
		<form class="js-ajax-form" method="post" action="{:url('admin/class/timetable_do')}" name="timetable_form">
			<input hidden="hidden" value="{$class['id']}" name="class_id"/>
			<input hidden="hidden" value="{$class['class_number']}" name="class_number"/>
			<button hidden="hidden" class="js-ajax-submit" name="js-ajax-submit"></button>
			<table class="table table-hover table-bordered table-list">
				<thead>
				<tr>
					<th style="width:50px;text-align:center;">课次</th>
					<th style="text-align:center;">教室</th>
					<th style="text-align:center;">任课老师</th>
					<th style="text-align:center;">课程日期</th>
					<th style="text-align:center;">课程开始</th>
					<th style="text-align:center;">课程结束</th>
				</tr>
				</thead>
				<if condition="isset($timetable)">
				<foreach name="timetable" item="vo">
					<tr name="timetable" value="{$vo.times}">
						<td style="width:30px;text-align:center;">{$vo.times}<input hidden="hidden" name="times[]" value="{$vo.times}"/></td>
						<td><select type="text" style="width:80px;text-align:center;" name="classroom_id[]">
							<foreach name="classroom_tree" item="tree_vo">
								<option value="{$tree_vo['id']}" {$tree_vo['id']==$vo['classroom_id']?"selected='selected'":""}>{$tree_vo["name"]}</option>
							</foreach>
							</select></td>
						<td><select type="text" style="width:80px;text-align:center;" name="teacher_id[]">
							<foreach name="teacher_tree" item="tree_vo">
								<option value="{$tree_vo['id']}" {$tree_vo['id']==$vo['teacher_id']?"selected='selected'":""}>{$tree_vo["name"]}</option>
							</foreach>
							</select></td>
						<td><input id="{$vo.times}_class_date" autocomplete="off" class="js-date" style="width:100%;text-align:center;" name="class_date[]" value="{$vo.class_date|default=''}"></input></td>
						<td><input id="{$vo.times}_starttime" autocomplete="off" class="js-hour-minutes" style="width:100%;text-align:center;" name="starttime[]" value="{$vo.start_time|default=''}"></input></td>
						<td><input id="{$vo.times}_endtime" autocomplete="off" class="js-hour-minutes" style="width:100%;text-align:center;" name="endtime[]" value="{$vo.end_time|default=''}"></input></td>
					</tr>
				</foreach>
				<if condition="$timetable['0']['class_number'] < $class['class_number']">
					<php>
						for($i=$timetable['0']['class_number']+1;$i<$class['class_number']+1;$i++){
							echo '<tr name="timetable" value="';
							echo $i.'"><td style="width:30px;text-align:center;">';
							echo $i;
							echo '<input hidden="hidden" name="times[]" value="';
							echo $i.'"/></td>';
							echo '
							<td><select type="text" style="width:80px;text-align:center;" name="classroom_id[]">';
							foreach($classroom_tree as $val){
								$string = "<option value='".$val["id"]."' ".(($val['id']==$classroom['id'])?'selected=selected':'').">".$val['name']."</option>";
								echo $string;
							}
							echo '</select></td>
						<td><select type="text" style="width:80px;text-align:center;" name="teacher_id[]">';
						foreach($teacher_tree as $val){
							$string = "<option value='".$val["id"]."' ".(($val['id']==$teacher['id'])?'selected=selected':'').">".$val['name']."</option>";
								echo $string;
						}
						echo '</select></td>
						<td><input type="text" id="';
						echo $i.'_class_date" autocomplete="off" class="js-date" style="width:100%;text-align:center;" name="class_date[]"/></td>
						<td><input type="text" id="';
						echo $i.'_starttime" autocomplete="off" class="js-hour-minutes" style="width:100%;text-align:center;" name="starttime[]"/></td>
						<td><input type="text" id="';
						echo $i.'_endtime" autocomplete="off" class="js-hour-minutes" style="width:100%;text-align:center;" name="endtime[]"/></td>
					</tr>
							';
						}
					</php>
				</if>
				<else>
					<php>
						for($i=1;$i<$class['class_number']+1;$i++){
							echo '<tr name="timetable" value="';
							echo $i.'"><td style="width:30px;text-align:center;">';
							echo $i;
							echo '<input hidden="hidden" name="times[]" value="';
							echo $i.'"/></td>';
							echo '
							<td><select type="text" style="width:80px;text-align:center;" name="classroom_id[]">';
							foreach($classroom_tree as $val){
								$string = "<option value='".$val["id"]."' ".(($val['id']==$classroom['id'])?'selected=selected':'').">".$val['name']."</option>";
								echo $string;
							}
							echo '</select></td>
						<td><select type="text" style="width:80px;text-align:center;" name="teacher_id[]">';
						foreach($teacher_tree as $val){
							$string = "<option value='".$val["id"]."' ".(($val['id']==$teacher['id'])?'selected=selected':'').">".$val['name']."</option>";
								echo $string;
						}
						echo '</select></td>
						<td><input type="text" id="';
						echo $i.'_class_date" autocomplete="off" class="js-date" style="width:100%;text-align:center;" name="class_date[]"/></td>
						<td><input type="text" id="';
						echo $i.'_starttime" autocomplete="off" class="js-hour-minutes" style="width:100%;text-align:center;" name="starttime[]"/></td>
						<td><input type="text" id="';
						echo $i.'_endtime" autocomplete="off" class="js-hour-minutes" style="width:100%;text-align:center;" name="endtime[]"/></td>
					</tr>
							';
						}
					</php>
				</if>
			</table>
			</form>
		</div>
		<div class="col-md-3">
			<table class="table table-bordered">
				<tr><th><b>班级ID：{$class['id']}</b></th></tr>
				<tr><th><b>班级：{$class['name']}</b></th></tr>
				<tr><th><b>默认教室：{$classroom['name']}</b></th></tr>
				<tr><th><b>默认老师：{$teacher['name']}</b></th></tr>
				<tr><th><b>课次：{$class['class_number']}</b></th></tr>
			</table>
			<input id="save_timetable" type="button" class="btn btn-success" value="保存" style="width:100%;"></input>
		</div>
	</div>
</div>
<script src="__STATIC__/js/admin.js"></script>
<script src="__STATIC__/js/bootstrap-datetimepicker/js/bootstrap-datetimepicker.js"></script>
<script src="__STATIC__/js/bootstrap-datetimepicker/js/locales/bootstrap-datetimepicker.zh-CN.js"></script>
<script type="text/javascript">
	function timestampToTime(timestamp) {
        var date = new Date(timestamp);//时间戳为10位需*1000，时间戳为13位的话不需乘1000
        Y = date.getFullYear() + '-';
        M = (date.getMonth()+1 < 10 ? '0'+(date.getMonth()+1) : date.getMonth()+1) + '-';
        D = date.getDate() + ' ';
        h = date.getHours() + ':';
        m = date.getMinutes() + ':';
        s = date.getSeconds();
        return Y+M+D;
    }

	function timetable_do(){
		var start_date = $("input[name='start_date']").val();
		var i = 0;
		var week = [];
		if(!start_date){
			alert('请选择开课日期！');
			$("input[name='start_date']").focus();
		}
		else{
			$("input[name='week']").each(function(){
				if($(this).is(':checked')){
					var id = $(this).val();
					week[i] = id;
					i++;
					var start_time = $("#"+id+"_default_starttime");
					var end_time = $("#"+id+"_default_endtime");
					if(!start_time.val()){
						alert("请选择开始时间！");
						start_time.focus();
						i = '-1';
						return false;
					}
					else if(!end_time.val()){
						alert("请选择结束时间！");
						end_time.focus();
						i = '-2';
						return false;
					}
					else{
						var start = start_time.val().replace(':','');
						var end = end_time.val().replace(':','');
						if(eval(start)>=eval(end)){
							alert('结束时间不能早于开始时间！');
							end_time.focus();
							i = '-3';
							return false;
						}
					}
				}
			});
			if(i==0){
				alert('请至少选择一天上课时间！');
			}
			else if(i>0){
				var myDate = new Date(start_date);
				var class_number = {$class['class_number']};
				var pre_day = myDate.getDay();
				<!-- console.log(week); -->
				<!-- console.log(week.length); -->
				<!-- console.log(class_number); -->
				for(var k = 0;k<class_number;k++){
					var today = week[k % week.length];
					if(pre_day<today){
						var this_day = timestampToTime(Date.parse(myDate)+(today-pre_day)*86400000);
						<!-- alert(this_day); -->
					}
					else if(pre_day == today){
						if(k==0){
							var this_day = timestampToTime(Date.parse(myDate));
						}
						else{
							var this_day = timestampToTime(Date.parse(myDate)+7*86400000);
						}
						<!-- alert(this_day); -->
					}
					else{
						var this_day = timestampToTime(Date.parse(myDate)+(7-(pre_day-today))*86400000);
						<!-- alert(this_day); -->
					}
					$("#"+(k+1)+"_class_date").val(this_day);
					$("#"+(k+1)+"_starttime").val($("#"+today+"_default_starttime").val());
					$("#"+(k+1)+"_endtime").val($("#"+today+"_default_endtime").val());
					pre_day = week[k % week.length];
					myDate = this_day;
				}
			}
			else{
				console.log(i);
			}
		}
	}
</script>
<script type="text/javascript">
    $(".js-hour-minutes").datetimepicker({
        format: "h:ii",
        autoclose: true,
        pickerPosition: "bottom-right",
		language: 'zh-CN',
		startView: 'day',
		maxView: 'day',
    });
</script>  
<script>
	$(function(){
		$("input[name='week']").click(function(){
			var id = $(this).val();
			var is_check = $("input[value='"+id+"']").prop("checked");
			if(is_check){
				$("div[name='"+id+"_input']").show();
				$("div[name='"+id+"']").prop("style","float:left;width:70px;");
			}
			else{
				$("div[name='"+id+"_input']").hide();
				$("div[name='"+id+"']").prop("style",false);
			}
		});
	});
	
	$(function(){
		$("#save_timetable").click(function(){
		var loc_class_date = 'default';
		var key = '0';
			$("tr[name='timetable']").each(function(){
				var loc = $(this).attr('value');
				var test_class_date = $("#"+loc+"_class_date");
				if(!test_class_date.val()){
					alert('请选择上课时间！');
					test_class_date.focus();
					key = '-5';
					return false;
				}
				else if(loc_class_date!='default'){
				<!-- 由于手动选择的时间生成会比之前JS生成的时间多8小时，所以比较的时候无非多8小时或者相等 -->
					var test_pre_class_date = Date.parse(new Date(loc_class_date.val()));
					var test_now_class_date = Date.parse(new Date(test_class_date.val()));
					var abs = test_now_class_date - test_pre_class_date;
					if(abs<0){
						alert('当前课次日期不能早于前次课日期！');
						test_class_date.focus();
						key='-9';
						return false;
					}
					else if(abs == '28800000' || abs =='0'){
							var start = $("#"+loc+"_starttime").val().replace(':','');
							var end = $("#"+(loc-1)+"_endtime").val().replace(':','');
							if(eval(start)<=eval(end)){
								alert('当天多课次下一课次开始时间不可早于前一课次结束时间！');
								$("#"+(loc)+"_starttime").focus();
								key = '-10';
								return false;
							}
						}
				}
				var test_start_time = $("#"+loc+"_starttime");
				var test_end_time = $("#"+loc+"_endtime");
				if(!test_start_time.val()){
					alert("请选择开始时间！");
					test_start_time.focus();
					key = '-6';
					return false;
				}
				else if(!test_end_time.val()){
					alert("请选择结束时间！");
					test_end_time.focus();
					key = '-7';
					return false;
				}
				else{
					var start = test_start_time.val().replace(':','');
					var end = test_end_time.val().replace(':','');
					if(eval(start)>=eval(end)){
						alert('结束时间不能早于开始时间！');
						test_end_time.focus();
						key = '-8';
						return false;
					}
					else{
						key = '1';
						loc_class_date = test_class_date;
					}
				}
			});
			if(key==1){
				$("button[name='js-ajax-submit']").click();
			}
		});
	});
</script>
</body>
</html>